<!-- ./idFieldRender.vue 文件 -->
<template>
    <div>
        <!-- 自定义 -->

        <el-popover placement="bottom" :width="220" trigger="click" :visible="state.show">
            <template #reference>
                <el-tag v-if="!renderValue" type="info" class="pointer" @click="edit">设置</el-tag>
                <el-tag v-if="renderValue" class="pointer" @click="edit()">{{ renderValue }}%</el-tag>
            </template>
            <div>
                <el-input v-model="state.value" ref="inputRef" type="number" :placeholder="'请输入 (' + renderRow.username + ') 的供货率'" />
                <div style="margin-top: 10px; text-align: right;">
                    <span class="btn" @click="cancel()">取消</span>
                    <span class="btn btn-primary" style="margin-left: 10px;">保存</span>
                </div>
            </div>
        </el-popover>




        <!-- <Icon v-if="state.loading == true" name="el-icon-Loading" class="is-loading" />
        <el-tag v-if="state.loading == false && state.edit === false && state.showText === null" plain class="pointer" @click="edit()" type="info">点击设置</el-tag>
        <el-tag v-if="state.loading == false && state.edit === false && state.showText !== null" plain class="pointer" @click="edit()">{{ state.showText }}</el-tag>
        <el-input v-if="state.loading == false && state.edit === true" v-model="state.value" @blur="save" placeholder="" ref="inputRef" type="number" @keyup.enter="$event.target.blur()" class="agency-fee-input" /> -->
    </div>
</template>

<script setup lang="ts">
import { TableColumnCtx, ElInput } from 'element-plus'
import { reactive, ref, nextTick } from 'vue';
import { agencyFee } from '/@/api/frontend/user/user'

// 自定义

const inputRef = ref()

// BuildAdmin将自动为此组件传递五个Props
interface Props {
    renderValue: any // 单元格值
    renderRow: TableRow // 当前行数据
    renderField: TableColumn // 当前列数据
    renderColumn: TableColumnCtx<TableRow> // 当前列上下文数据
    renderIndex: number // 当前行号
}
const props = defineProps<Props>()

const state = reactive({
    edit: false,
    value: null,
    showText: props.renderValue ? props.renderValue + '%' : null,
    newValue: -1,
    loading: false,
    show: false
})


const cancel = () => {
    console.log(1)
    state.show = false;
}

const save = () => {
    state.loading = true;
    state.edit = false;
    agencyFee({id:props.renderRow.id, agency_fee: state.value}).then((e) => {
        state.loading = false;
        if(e.code == 1){
            state.showText = (state.value == '' || state.value == 0 || state.value == null || e.data.agency_fee == 0) ? null : e.data.agency_fee + '%'
            state.newValue = e.data.agency_fee == 0 ? null : e.data.agency_fee;
        }else{

        }
        
    }).catch((err) => {
        console.log(err)
    })
}

const edit = () => {
    state.show = true;
    nextTick(() => {
        inputRef.value.focus();
    })
}

</script>

<style scoped lang="scss">
// 自定义
.pointer{
    cursor: pointer;
    user-select: none;
}
.agency-fee-input{
    width: 150px;
}
</style>